<template>
	<div class="activitiesbanner" v-if="bannerdata.length>0">
		<!--一行一列-->
		<div v-if="posadpicStyle==='one'">
			<div v-for="(val, index) in bannerdata" :key="index">
				<img style="width: 100%;" :src="val.publicityPicture" @click='jumpEvent(val)' />
			</div>
		</div>
		<!--一行两列-->
		<div class="coutwoPic" v-if="posadpicStyle==='two'">
			<div class="coutwoPicimg" v-for="(val, index) in bannerdata" :key="index">
				<img :src="val.publicityPicture" @click="jumpEvent(val)"/>
			</div>
		</div>
		<!--一行三列-->
		<div class="couthreePic" v-if="posadpicStyle==='three'">
			<div class="couThreePicimg" v-for="(val, index) in bannerdata" :key="index">
				<img :src="val.publicityPicture" @click='jumpEvent(val)' />
			</div>
		</div>
		<div style="clear: both;"></div>

	</div>


</template>

<script>
	import {NAVIGATE} from "../../config/postMessage-types";
	import {mapGetters} from "vuex";
	import handlePath from "../../utils/lxn/handlePath"
	export default {
		props: {
			bannerdata: {
				type: Array,
				default: () => []
			},
			bannerid: {
				type: String,
				default: ""
			},
		},
		data() {
			return {

			}
		},
		computed: {
			posadpicStyle() {
				if(this.bannerid) {
					console.log("posadpicStyle", this.getCurrentVDO(this.bannerid, this.pageName).config.posadpicStyle);
					if(this.getCurrentVDO(this.bannerid, this.pageName).config.posadpicStyle === "0") {
						return 'one';
					} else if(this.getCurrentVDO(this.bannerid, this.pageName).config.posadpicStyle === "1") {
						return 'two';
					} else if(this.getCurrentVDO(this.bannerid, this.pageName).config.posadpicStyle === "2") {
						return 'three';
					}else{
						return 'one';
					}
				}
			},
			isApp() {
				return window.isApp;
			},
			...mapGetters('wxh', [
                'userInfo'
            ]),
            hasUserInfo() {
                return Object.keys(this.userInfo).length;
            },
		},
		methods: {
			jumpEvent(item) {
				if (!item.extendField) return;
				if (!this.isApp) {
					// var urldata = JSON.parse(item.extendField).url.path
					var urldata = handlePath(item)
					if(urldata) {
						this.$router.push({
							name: "MiddleWare",
							params: {
								pageName: urldata
							}
						})
					}
				} else if (this.isApp){
					var urldata = JSON.parse(item.extendField).url
					if(urldata.valueArray[0] == '商品详情页面' ) {
						this.gotornpage('Detail', urldata.path.split("=")[1])
					} else if(urldata.valueArray[0] == '分类页面'){
						this.gotornpage('GoodsClassify', urldata.path.split("=")[1])
					}else if(urldata.valueArray[0] == '其他页面') {
						if(urldata.path == 'IntegralBuy') {
							if(this.hasUserInfo ===0) {
								this.gotornpage('Login')
							}else{
								this.gotornpage(urldata.path)
							}
						}else if(urldata.path == 'Coupons'){
							this.gotornpage('CouponsAcquire')
						} else if (urldata.path == 'buyGiftCard') {
							if(this.hasUserInfo ===0) {
								this.gotornpage('Login')
							} else{
								this.gotornpage('BuyGiftCard')
							}
						} else if(urldata.path == 'foodChecked'){
							if(this.hasUserInfo ===0) {
								this.gotornpage('Login')
							}
							else{
								this.gotornpage('FoodCheck')
							}
						} else if(urldata.path == 'prize_card'){
								if(this.hasUserInfo ===0) {
									this.gotornpage('Login')
								} else {
								this.$router.push({
									name: "MiddleWare",
									params: {
										pageName: urldata.path
									}
								})
							}
						} else if(urldata.path == 'integral'){
								if(this.hasUserInfo ===0) {
									this.gotornpage('Login')
								} else {
								this.$router.push({
									name: "MiddleWare",
									params: {
										pageName: urldata.path
									}
								})
							}
						} else if(urldata.path == 'login'){
							this.gotornpage('Login')
						} else if(urldata.path == 'register'){
							this.gotornpage('Regrester')
						} else {
							this.$router.push({
								name: "MiddleWare",
								params: {
									pageName: urldata.path
								}
							})
						}
					}
				}
			},
			gotornpage(page, code) {
				let params = {}
				if(page=='Detail'){
					params = {
						screen: page,
						params:{
							goodsCode: code
						}
					}
				}else if(page=='GoodsClassify'){
					params = {
						screen: page,
						params:{
							classCode: code
						}
					}
				} else {
					params = {
						screen: page,
					}
				}
				let goBackIns = {
					type: NAVIGATE,
					params: params
				}
				window.postMessage(JSON.stringify(goBackIns));
			}
		},
		mounted() {
			console.log("mounted---this.bannerid", this.bannerid);
		},
	}
</script>

<style>
	.activitiesbanner .coutwoPic {
		/*padding: 0.5rem;*/
		position: relative;
		float: left;
		width: 100%;
	}
	
	.activitiesbanner .coutwoPic .coutwoPicimg {
		position: relative;
		float: left;
		width: 50%;
		/*margin: 0.3rem 0rem;*/
	}
	
	.activitiesbanner .coutwoPic .coutwoPicimg img {
		width: 100%;
		/*padding: 0 0.25rem;*/
	}
	
	.activitiesbanner .couthreePic {
		/*padding: 0.5rem 0.2rem;*/
		text-align: center;
		margin: 0rem auto;
		float: left;
	}
	
	.activitiesbanner .couthreePic .couThreePicimg {
		float: left;
		/*margin: 0.3rem 1%;*/
		width: 33.33%;
	}
	
	.activitiesbanner .couthreePic .couThreePicimg img {
		max-width: 100%;
		margin: 0 auto;
	}
</style>